/**
 * vilan-admin-v1 极简主题系统
 * 完全基于 Element Plus 官方方案
 */
import { computed } from 'vue'
import { usePreferredColorScheme, useLocalStorage } from '@vueuse/core'
import { themeTransition, disableTransitions, enableTransitions } from '@/utils/theme/animation'

export function useTheme() {
  // ==================== 响应式状态 ====================
  
  // 系统主题偏好检测
  const systemTheme = usePreferredColorScheme()
  
  // 用户设置的主题模式 (auto/light/dark)
  const themeMode = useLocalStorage('vilan-theme-mode', 'auto')
  
  // 用户设置的主题色
  const themeColor = useLocalStorage('vilan-theme-color', '#646cff')
  
  // 实际生效的主题
  const actualTheme = computed(() => {
    if (themeMode.value === 'auto') {
      return systemTheme.value === 'dark' ? 'dark' : 'light'
    }
    return themeMode.value
  })
  
  // 是否深色模式
  const isDark = computed(() => actualTheme.value === 'dark')
  
  // ==================== 核心功能 ====================
  
  /**
   * 切换主题模式（带动画）
   * @param {string} mode - 主题模式：'light' | 'dark' | 'auto'
   * @param {MouseEvent} event - 可选的鼠标事件，用于 View Transition 动画
   */
  const setThemeMode = async (mode, event = null) => {
    console.log('🎨 切换主题模式:', mode)
    
    // 如果有鼠标事件且浏览器支持 View Transition API，使用圆形扩散动画
    if (event && document.startViewTransition) {
      await themeTransition(event, () => {
        themeMode.value = mode
        applyTheme()
      })
    } else {
      // 降级方案：临时禁用过渡，避免颜色变化时所有元素同时闪烁
      disableTransitions()
      themeMode.value = mode
      applyTheme()
      enableTransitions()
    }
  }
  
  /**
   * 切换主题颜色（优化版）
   * @param {string} color - 主题颜色值
   */
  const setThemeColor = (color) => {
    console.log('🎨 切换主题颜色:', color)
    // 颜色切换不需要禁用过渡，CSS 变量的更新已经很流畅
    themeColor.value = color
    applyThemeColor(color)
  }
  
  /**
   * 应用主题（核心函数）
   */
  const applyTheme = () => {
    const html = document.documentElement
    
    // Element Plus 官方暗黑主题类名
    if (isDark.value) {
      html.classList.add('dark')
    } else {
      html.classList.remove('dark')
    }
    
    // 应用主题色
    applyThemeColor(themeColor.value)
  }
  
  /**
   * 应用主题颜色（只改主色，其他跟随Element Plus）
   */
  const applyThemeColor = (color) => {
    const root = document.documentElement
    
    // 只设置主题色，Element Plus会自动生成其他变体
    root.style.setProperty('--el-color-primary', color)
    
    console.log('✅ 主题色已更新:', color)
  }
  
  /**
   * 初始化主题系统
   */
  const initTheme = () => {
    console.log('🚀 初始化 vilan-admin-v1 主题系统')
    applyTheme()
    console.log('✅ 主题系统初始化完成')
  }
  
  // ==================== 主题模式选项 ====================
  
  const themeModeOptions = [
    { value: 'light', label: '浅色模式', icon: 'sun' },
    { value: 'dark', label: '深色模式', icon: 'moon' },
    { value: 'auto', label: '跟随系统', icon: 'computer' }
  ]
  
  // ==================== 预设主题色 ====================
  
  // 主题色选项（数组格式，方便 UI 展示）
  const themeColorOptions = [
    { label: '默认蓝', value: '#646cff' },
    { label: 'Element 蓝', value: '#409eff' },
    { label: '绿色', value: '#67c23a' },
    { label: '紫色', value: '#6f42c1' },
    { label: '粉色', value: '#e83e8c' },
    { label: '橙色', value: '#fd7e14' },
    { label: '红色', value: '#dc3545' },
    { label: '青色', value: '#17a2b8' },
    { label: '薄荷绿', value: '#20c997' },
    { label: '深蓝', value: '#0d6efd' },
    { label: '靛蓝', value: '#6610f2' },
    { label: '黄色', value: '#ffc107' }
  ]
  
  // ==================== 导出 ====================
  
  return {
    // 响应式状态
    themeMode,
    themeColor,
    actualTheme,
    isDark,
    systemTheme,
    
    // 核心方法
    setThemeMode,
    setThemeColor,
    initTheme,
    
    // 配置选项
    themeModeOptions,
    themeColorOptions
  }
}